<table class="table table-hover" style="margin-top:5px;min-width:auto;">
    <thead>
    <tr style="background-color: #f5f5f5;">
        <th>ID</th>
        <th>服务器</th>
        <th>用户</th>
        <th>状态</th>
        <th>开始时间</th>
        <th>结束时间</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody id="record_table">
    {% for i in data_list %}
       <tr name="tbody">
            <td>{{ i.id }}</td>
            <td>{{ i.host }}</td>
            <td>{{ i.user }}</td>
            <td>
            {% if i.is_connecting == False %}
            <span  class="label label-info">Close</span>
            {% else %}
            <span name="disconnect" class="label btn-success btn" title="点击断开连接" record_id="{{ i.id }}">Connecting</span>
            {% endif %}
            </td>
            <td>{{ i.create_time|date:"Y-m-d H:i:s" }}</td>
            <td>{{ i.end_time|date:"Y-m-d H:i:s"  }}</td>
            <td>{{ i.create_time|timesince:i.end_time }}</td>
            <td>
                {% if i.is_connecting == False %}
                <a href="" name="play" class="btn btn-sm btn-success" data-toggle="modal" data-target="#recordModal"
                   filename="{{ i.filename }}" hostip="{{ i.host }}" nickname="{{ i.user }}" start_time="{{ i.create_time|date:"Y-m-d H:i:s" }}" end_time="{{ i.end_time }}">回放</a>
                {% else %}
                <a href="" disabled="disabled" class="btn btn-sm btn-success">回放</a>
                {% endif %}
            </td>
        </tr>
    {% endfor %}

    </tbody>

</table>
<div class="text-right" style="margin-top:-30px;padding-right:9%">
    <ul class="pagination" id="pagination"></ul>
</div>
<script type="text/javascript" src="/static/mystyle/js/game.js"></script>

<script>
    
    //前端分页
    var limit = 15; //每页显示数据条数
    var total = $('#record_table').find('tr').length;
    var allPage = total % limit > 0 ? parseInt(total / limit) + 1 : parseInt(total / limit);

    function doPage(n) {
        if (allPage > 1) {
            var prevPage = '', nextPage = '', pageHtml = '';

            if (n === 1) {
                prevPage = '<li class="disabled"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li data-page="' + (n + 1) + '"><a href="javascript:;">下一页</a></li>';
            } else if (n === allPage) {
                prevPage = '<li data-page="' + (n - 1) + '"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li class="disabled"><a href="javascript:;">下一页</a></li>';
            } else {
                prevPage = '<li data-page="' + (n - 1) + '"><a href="javascript:;">上一页</a></li>';
                nextPage = '<li data-page="' + (n + 1) + '"><a href="javascript:;">下一页</a></li>';
            }

            if (n <= 5) {
                for (var i = 1; i <= 5; i++) {
                    if (n === i) {
                        pageHtml += '<li class="active"><a href="javascript:;">' + i + '</a></li>';
                    } else {
                        if (i <= allPage) {
                            pageHtml += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>';
                        }
                    }

                }
            } else {
                for (var i = 1; i <= 5; i++) {

                    cur_page = parseInt(parseInt((n - 1) / 5) * 5);

                    if (n === (cur_page + i)) {
                        pageHtml += '<li class="active"><a href="javascript:;">' + (cur_page + i) + '</a></li>';
                    } else {
                        if ((i + cur_page) <= allPage) {
                            pageHtml += '<li data-page="' + (i + cur_page) + '"><a href="javascript:;">' + (i + cur_page) + '</a></li>';
                        }
                    }

                }

            }

            $('#pagination').html(prevPage + pageHtml + nextPage);
        }

        $('#record_table').find('tr[name="tbody"]').hide();
        if (n === 1) {
            $('#record_table').find('tr[name="tbody"]:lt(' + limit + ')').show();
        } else {
            $('#record_table').find('tr[name="tbody"]:gt(' + ((n - 1) * limit - 1) + '):lt(' + limit + ')').show();
        }

    }

    doPage(1);

    $('#pagination').on('click', 'li a', function (event) {
        event.preventDefault();
        var curr = parseInt($(this).parent().data('page'));

        if (!isNaN(curr)) {
            doPage(curr);
        }
    });

    $('td a[name="play"]').click(function(){
        $("#play-btn").empty();
        var filename = $(this).attr("filename");
        var hostip = $(this).attr("hostip");
        var nickname = $(this).attr("nickname");
        var start_time = $(this).attr("start_time");
        var end_time = $(this).attr("end_time");
        var host_url = window.location.host;
        var src_str = "http://"+host_url+"/static/record/"+filename;
        var html_str = '<asciinema-player rows=30 id="play" title="WEBSSH RECORD" theme="solarized-dark" src="'+src_str+'" speed="2" '+
            'idle-time-limit="2" poster="data:text/plain,\x1b[1;32m'+
            '\x1b[1;0m用户:\x1b[1;32m'+nickname+
            '\x1b[1;0m 连接主机:\x1b[1;32m'+hostip+
            '\x1b[1;0m 时间：'+start_time+' 至 '+end_time+'"></asciinema-player>';
        console.log(html_str);
        $("#play-btn").append(html_str);
    });

    $("span[name='disconnect']").click(function () {
        var id = $(this).attr("record_id");
        console.log(id);
        $.post('/disconnect/', {'id': id}, function (data) {
            if (data == "False") {
                spop({
                    template: "无权限操作",
                    style: 'warning',
                    autoclose: 3000
                });
            } else {
                spop({
                    template: data,
                    style: 'success',
                    autoclose: 3000
                });
                setTimeout("location.reload()",2000)
            }
        });
    });

</script>